Vue 路由-重定向#问题：网页打开，url 默认是/路径，未匹配到组件时，会出现空白说明：重定向-匹配到 path 后，强制跳转 path 路径语法：
12345{ path:匹配路径, redirect:重定向到的路径, // ...}
12345678const router = new VueRouter({ routes: [ // 访问到/时重定向到/home { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/search/:words?', component: Search }, ],});
声明式导航#导航链接#需求：实现导航高亮效果vue-router提供了一个全局组件router-link（取代a标签）
12<a href="#/find">发现音乐</a><router-link to="/find">发现音乐</router-link>
能跳转，配置to属性指定路径（必须）。本质还是a标签，**to无需加#**
能高亮，默认就会提供高亮类名，可以直接设置高亮样式
在将原本导航栏的a标签替换为router-link组件后，可以发现，渲染到页面后，组件还是被解析为了a标签，不过上面多了两个类此时要添加高亮样式，就只需通过这两个类任意一个指定其样式即可，例如：
123.footer_wrap a.router-link-active { background-color: #ff3555;}
两个类名#在上面发现router-link自动给当前导航添加了两个高亮类名
router-link-active模糊匹配（用的多）to="/m...
路由模块封装#以我的音乐应用为例所有的路由配置都放在main.js中是不合适的最好将路由模块抽离出来，拆分模块，利于维护将路由相关部分代码抽出来放到router/index.js中，用export default router导出，在main.js中用import导入使用tips:拆分路由模块后，原本由路由管理的组件路径需要修改，为了避免目录层级问题，建议使用绝对路径导入组件，vue 中使用@指代src，例如：
123import Find from '../views/Find.vue';// 改为：import Find from '@/views/Find';
完整代码：src/router/index.js:
123456789101112131415161718192021222324252627// 路由的使用步骤 5+2// 5个基础步骤// 2个核心步骤// 1.1.下载v3.6.5// 1.2.引入import VueRouter from 'vue-router';import ...
单页应用程序&路由#单页应用程序 SPA-Single Page Application#
单页面应用（SPA）：所有功能在一个 html 页面上实现
具体示例：网易云音乐https://music.163.com/多页面应用比如京东淘宝
开发分类
实现方式
页面性能
开发效率
用户体验
学习成本
首屏加载
SEO
单页
一个 html 页面
按需更新性能高
高
非常好
高
慢
差
多页
多个 html 页面
整页更新性能低
中等
一般
中等
快
优
单页面应用：系统类网站/内部网站/文档类网站/移动端站点多页面应用：公司官网/电商类网站
路由#单页应用程序开发效率高，性能好，用户体验好，最大的原因就是：页面按需更新要按需更新，首先就需要明确：访问路径和组件的对应关系，就需要用到路由生活中的路由：设备和 ip 的映射关系Vue 中的路由：路径和组件的映射关系首页 http://localhost:8080/#/home评论 http://localhost:8080/#/comment搜索 http://loc...
案例-商品列表#效果：
需求说明#
my-tag标签组件封装
双击显示输入框，输入框获取焦点
失去焦点，隐藏输入框
回显标签信息
内容修改，回车修改标签信息
my-table表格组件封装
动态传递表格数据渲染
表头支持用户自定义
主体支持用户自定义
实现#my-tag组件封装#
双击显示输入框，输入框获取焦点标题及输入框用v-if和v-else通过编辑状态的修改，来控制二者的显示隐藏标题盒子绑定双击事件@dblclick，修改编辑状态为true输入框获得焦点：
$nextTick+$refs获取到 dom，进行focus获取焦点
通过全局注册自定义指令v-focus的方式实现
12345678910111213import Vue from 'vue';import App from './App.vue';Vue.config.productionTip = false;// 全局注册指令focusVue.directive('focus', { inserted(el) { ...
插槽#默认插槽#作用：让组件内部的一些结构支持自定义需求：在页面中显示一个对话框，封装为一个组件组件的内容部分，不希望写死，希望能在使用时自定义提示内容
插槽基本语法#
组件内需要定制的结构部分，改用<slot></slot>占位
使用组件时，<MyDialog></MyDialog>标签内部，传入结构替换slot
例：MyDialog.vue:
12345678910111213141516<template> <div class="dialog"> <div class="dialog-header"> <h3>友情提示</h3> <span class="close">x</span> </div> <div class="dialog-content"...
自定义指令#内置指令：
v-html
v-model
v-for
…
自定义指令：
v-focus
v-loading
v-lazy
…
每个指令都有各自独立的功能自定义指令：自己定义的指令，可以封装一些 dom 操作，扩展额外功能
实例：元素获得焦点#需求：当页面加载时，让元素获得焦点（autofocus在 safari 浏览器有兼容性问题）操作 dom：dom 元素.focus()方式比较麻烦
123mounted(){ this.$refs.inp.focus()}
注册自定义指令语法#
全局注册(main.js 中注册)
1234567Vue.directive('指令名', { // inserted会在指令所在的元素被插入到页面中时触发 inserted(el) { // el就是指令所绑定的元素，可以对el标签扩展额外功能 el.focus(); },});
局部注册(组件内注册)
12345678directives...
Vue 异步更新和$nextTick#异步更新#需求：编辑标题，编辑框自动聚焦案例结构：
12345678<div v-if="isShowEdit"> <input type="text" v-model="editValue" ref="inp" /> <button>确认</button></div><div v-else> <span>{{ title }}</span> <button @click="handleEdit">编辑</button></div>
数据：
1234567data() { return { title: '大标题', isShowEdit: false, edit...
ref 和$refs#作用：利用ref和$refs可以用于获取 dom 元素或组件实例特点：查找范围为当前组件内（更精确稳定）
获取 dom:
目标标签-添加 ref 属性 1<div ref="chartRef">图表容器</div>
恰当时机，通过this.$refs.xxx，获取目标标签 123mounted(){ console.log(this.$refs.chartRef)}
获取组件：
目标组件-添加ref属性 1<BaseForm ref="baseForm"></BaseForm>
恰当时机，通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法 1this.$refs.baseForm.组件方法();
.sync 修饰符#作用：可以实现子组件与父组件数据的双向绑定，简化代码，作用与v-model一致特点：prop属性名，可以自定义，非固定为value，v-model固定使用value可读性不高场景：封装弹框类的基础组件，visible属性 true 显示 false 隐藏本质：就是:属性名和@update:属性名合写父组件（使用）：
12<BaseDialog :visible.sync="isShow"></BaseDialog><BaseDialog :visible="isShow" @update:visible="isShow=$event"></BaseDialog>
子组件（封装）：
12345678props:{ visible:Boolean},methods:{ close(){ this.$emit('update:visible',false) }...